body {
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.toolbar {
    padding: 8px;
    background: #3e4970;
    border-bottom: 1px solid #ddd;
    display: flex;
    gap: 8px;
}

.toolbar button {
    padding: 4px 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background: white;
    cursor: pointer;
    transition: all 0.2s;
}

.toolbar button:hover {
    background: #e6e6e6;
    border-color: #999;
}

.container {
    flex: 1;
    display: flex;
    overflow: hidden;
}

.editor-area, .preview-area {
    flex: 1;
    padding: 16px;
    box-sizing: border-box;
    overflow-y: auto;
}

#editor {
    width: 100%;
    height: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    resize: none;
    font-family: 'Consolas', monospace;
    line-height: 1.6;
    background-color: #000;
    color: #fff;
}

#preview {
    border-left: 1px solid #eee;
    padding-left: 16px;
}

/* Markdown预览样式增强 */
#preview h1 { font-size: 2em; border-bottom: 2px solid #eee; }
#preview h2 { font-size: 1.5em; }
#preview code { background: #f5f5f5; padding: 2px 4px; }
#preview pre { background: #f8f8f8; padding: 12px; overflow: auto; }
#preview img { max-width: 100%; }
#preview table { border-collapse: collapse; }
#preview td, #preview th { border: 1px solid #ddd; padding: 6px 12px; }

/* 确保工具栏使用弹性布局 */
.toolbar {
    display: flex;
    gap: 8px;
    padding: 6px;
    background: #f3f3f3;
    border-bottom: 1px solid #ddd;
}

/* 复制按钮样式 */
#copyPreview {
    background: #007acc;
    color: white;
    border: none;
    padding: 4px 8px;
    border-radius: 3px;
    cursor: pointer;
}